import { Select } from 'antd';
import { getChannelList } from 'api/channel';
import React, { useEffect, useState } from 'react';
const { Option } = Select;

/*
  学习目标：自定义表单组件-改造为受控组件：onChange 和 value
   💥 把表单元素的value和onChange，托管给Form组件，Form源码内容部会自动管理我们value和onChange
  // https://ant.design/components/form-cn/#components-form-demo-customized-form-controls

   步骤：
     1. Channel的props形参上定义了onChange 和 value
     2. value和onChange透传给Select组件
     3. 使用透传props，原封不动的将onChange和value 、id都扔给Select的props
*/

export default function Channle(props) {
  const [channelList, setChannelList] = useState([]);

  const loadChannels = async () => {
    const res = await getChannelList();
    setChannelList(res.data.channels);
  };

  useEffect(() => {
    loadChannels();
  }, []);

  return (
    <Select style={{ width: 200 }} {...props}>
      {channelList.map((item) => (
        <Option value={item.id} key={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
}
